<template>
  <div class="home-container">
    <van-nav-bar class="app-nav-bar">
      <template #title>
        <van-button
          class="search-btn"
          icon="search"
          type="info"
          round
          size="small"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <van-tabs v-model="active">
      <van-tab
      
        v-for="channels in channels"
        :title="channels.name"
        :key="channels.id"
      
         sticky><list :channel="channels"></list></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import { getUserChannels } from "../../network/goods";
import list from "../../components/common/list/list";
export default {
  name: "goods",
  data() {
    return {
      active: 2,
      channels: [],
    };
  },
  components: {
    list
  },
  created() {
    getUserChannels().then((res) => {
      console.log(res);
      this.channels = res.data.channels;
    });
  },
};
</script>
<style lang="scss" scoped>
.home-container {
  ::v-deep .van-nav-bar__title {
    max-width: none;
  }
  .search-btn {
    width: 277px;
    height: 32px;
    background: #5babfb;
    border: none;
    .van-icon {
      font-size: 16px;
    }
    .van-button__text {
      font-size: 14px;
    }
  }
}
.van-nav-bar {
  background: dodgerblue;
}
</style>
